<template>
  <div>
    <el-card class="box-login">
      <p class="center">注册</p>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="user">
          <el-input
            type="text"
            v-model="ruleForm.user"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="check">
          <el-input
            type="password"
            v-model="ruleForm.check"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            type="email"
            v-model="ruleForm.email"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="iphone">
          <el-input
            type="iphone"
            v-model="ruleForm.iphone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >注册</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="goRouter('/login')" type="warning"
            >已有账号,去登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    //  登录校验规则
    var validateUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入账户！"));
      } else {
        callback(console.log("账户校验通过"));
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码！"));
      } else if (value.length < 6) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback(console.log("密码校验通过"));
      }
    };
    var validateCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码！"));
      } else if (value !== this.ruleForm.checkPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback(console.log("确认密码校验通过"));
      }
    };
    var validateEmail = (rule, value, callback) => {
      var reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );
      if (!value) {
        return callback(new Error("请输入邮箱！"));
      } else if (!reg.test(value)) {
        callback(new Error("邮箱格式不正确!"));
      } else {
        callback(console.log("邮箱校验通过"));
      }
    };
    var validateIphone = (rule, value, callback) => {
      var reg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$");
      if (!value) {
        return callback(new Error("请输入手机号！"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback(console.log("手机号校验通过"));
      }
    };
    //  注册校验
    return {
      ruleForm: {
        user: "",
        checkPass: "",
        check: "",
        email: "",
        iphone: ""
      },
      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        checkPass: [{ validator: validateCheckPass, trigger: "blur" }],
        check: [{ validator: validateCheck, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        iphone: [{ validator: validateIphone, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          that.$axios
            .post("/user/register", {
              user: that.ruleForm.user,
              pass: that.ruleForm.checkPass,
              check: that.ruleForm.check,
              email: that.ruleForm.email,
              iphone: that.ruleForm.iphone
            })
            .then(res => {
              if (res.data.success && res.data.code == 0) {
                this.$alert("注册成功！", "通知", {
                  confirmButtonText: "确定",
                  callback: action => {
                    that.$router.push("/login");
                  }
                });
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goRouter(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="less" scoped>
.center {
  text-align: center;
}
.box-login {
  width: 480px;
  min-height: 280px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>